<template>
    <div>
        <dl>
            <dt class="flex">
                <span class="">最新消息</span>
            </dt>
            <dd v-for="message in messages" class="flex border-b gap-x-2">
                <span class="grow">{{ message.title }}</span>
                <span>{{ message.read }}</span>
                <span><RouterLink :to="'/messages/detail/'+message.id">查看</RouterLink></span>
            </dd>
        </dl>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

let messages = ref([
    {
        id: 1,
        title: '消息1',
        read: 'read'
    },
    {
        id: 2,
        title: '消息2',
        read: 'unread'
    }   
])
</script>

<style scoped>

</style>